<template>
  <i-page class="user-company-page" :loading="state.loading">
    <template #header>
      <a-page-header title="公司管理">
        <div class="d-flex justify-space-between pb-4">
          <a-typography-paragraph>
            查看并修改公司配置项，可修改项包括：公司名称、公司LOGO图片、公司LOGO名称，小程序信息。商户信息，公众号信息
          </a-typography-paragraph>

          <img
              class="image"
              :src="Img"
              alt="content"
              style="width: 155px;position: absolute;right: 80px"
          />
        </div>

        <template #footer>
          <div v-if="state.form.associationCountList" class="d-flex pb-2">
            <template v-for="item in state.form.associationCountList" :key="item.label">
              <a-card class="mb-2 mr-4" hoverable :body-style="{padding: '10px 16px'}">
                <a-statistic
                    :title="item.label+'数'"
                    :value="item.count"
                    :precision="0"
                    style="margin-right: 50px;width: 120px"
                >
                </a-statistic>
              </a-card>
            </template>
          </div>
        </template>
      </a-page-header>
    </template>
    <a-card :title="state.form.name" :bordered="false">
      <template #extra>
        <a-button type="link" @click="onEdit">修改</a-button>
      </template>

      <a-typography>
        <a-typography-title :level="5">基本信息</a-typography-title>
        <a-typography-paragraph>

          <a-list class="i-list">
            <a-list-item>
              <div class="d-flex">
                <div style="width: 100px">公司名称 ：</div>
                <a-typography-text :copyable="!!state.form.name">{{ state.form.name }}</a-typography-text>
              </div>

            </a-list-item>
            <a-list-item>
              <div class="d-flex">
                <div style="width: 100px">Logo标题 ：</div>
                <a-typography-text :copyable="!!state.form.title">{{ state.form.title }}</a-typography-text>
              </div>
            </a-list-item>
            <a-list-item>
              <div class="d-flex align-center">
                <div style="width: 100px"> Logo图片 ：</div>
                <a-image :src="state.form.logo" width="40px" style="border-radius: 4px"/>
              </div>
            </a-list-item>
          </a-list>
        </a-typography-paragraph>

        <a-divider/>

        <a-typography-title :level="5">小程序信息</a-typography-title>
        <a-typography-paragraph>
          <a-row>
            <a-col :span="12">
              <a-list class="i-list">
                <a-list-item>
                  <div class="d-flex align-center">
                    <div style="width: 100px"> 主体名称 ：</div>
                    <a-typography-text :copyable="!!state.form.principalName">{{ state.form.principalName }}</a-typography-text>
                  </div>
                </a-list-item>
                <a-list-item>
                  <div class="d-flex">
                    <div style="width: 100px">微信原始ID ：</div>
                    <a-typography-text :copyable="!!state.form.weixinSign">{{ state.form.weixinSign }}</a-typography-text>
                  </div>
                </a-list-item>
                <a-list-item>
                  <div class="d-flex align-center">
                    <div style="width: 100px"> 小程序名称 ：</div>
                    <a-typography-text :copyable="!!state.form.appletName">{{ state.form.appletName }}</a-typography-text>
                  </div>
                </a-list-item>
              </a-list>
            </a-col>
            <a-col :span="12">
              <a-list class="i-list">
                <a-list-item>
                  <div class="d-flex align-center">
                    <div style="width: 100px">小程序码 ：</div>
                    <a-image :src="state.form.appletImg" width="40px" style="border-radius: 4px"/>
                  </div>
                </a-list-item>

                <a-list-item>
                  <div class="d-flex align-center">
                    <div style="width: 100px"> 小程序appid ：</div>
                    <a-typography-text :copyable="!!state.form.appletAppid">{{ state.form.appletAppid }}</a-typography-text>
                  </div>
                </a-list-item>

                <a-list-item>
                  <div class="d-flex align-center">
                    <div style="width: 100px"> 小程序秘钥 ：</div>
                    <a-typography-text :copyable="!!state.form.appletSecret">{{ state.form.appletSecret }}</a-typography-text>
                  </div>
                </a-list-item>

              </a-list>
            </a-col>
          </a-row>

        </a-typography-paragraph>

        <a-divider/>

        <a-typography-title :level="5">商户信息</a-typography-title>
        <a-typography-paragraph>
          <a-list class="i-list">
            <a-list-item>
              <div class="d-flex">
                <div style="width: 100px">商户号 ：</div>
                <a-typography-text :copyable="state.form.mchId">{{ state.form.mchId }}</a-typography-text>
              </div>

            </a-list-item>
            <a-list-item>
              <div class="d-flex">
                <div style="width: 100px">APIv2密钥 ：</div>
                <a-typography-text :copyable="state.form.mchKey">{{ state.form.mchKey }}</a-typography-text>
              </div>
            </a-list-item>

            <a-list-item>
              <div class="d-flex">
                <div style="width: 100px">API证书 ：</div>
                <a-typography-text code>{{ state.form.keyPath }}</a-typography-text>
              </div>
            </a-list-item>
          </a-list>
        </a-typography-paragraph>

        <a-divider/>
        <a-typography-title :level="5">公众号信息</a-typography-title>
        <a-typography-paragraph>
          <a-list class="i-list">
            <a-list-item>
              <div class="d-flex">
                <div style="width: 100px">公众号appid ：</div>
                <a-typography-text :copyable="state.form.generalAppid">{{ state.form.generalAppid }}</a-typography-text>
              </div>

            </a-list-item>
            <a-list-item>
              <div class="d-flex">
                <div style="width: 100px">公众号秘钥 ：</div>
                <a-typography-text :copyable="state.form.generalSecret">{{ state.form.generalSecret }}</a-typography-text>
              </div>
            </a-list-item>
            <a-list-item>
              <div class="d-flex">
                <div style="width: 100px">token ：</div>
                <a-typography-text :copyable="state.form.generalToken">{{ state.form.generalToken }}</a-typography-text>
              </div>
            </a-list-item>
            <a-list-item>
              <div class="d-flex">
                <div style="width: 100px">token秘钥 ：</div>
                <a-typography-text :copyable="state.form.generalAesKey">{{ state.form.generalAesKey }}</a-typography-text>
              </div>
            </a-list-item>
          </a-list>
        </a-typography-paragraph>
      </a-typography>
    </a-card>

    <Edit :api="api"/>
  </i-page>
</template>

<script setup lang="ts">
import {CompanyApi} from "~/api/system/company.api";
import {onMounted, reactive} from "vue";
import Img from '@/assets/RzwpdLnhmvDJToTdfDPe.png';
import Edit from "~/views/system/company/Edit.vue";

const api = new CompanyApi();
const state = reactive({
  visible: false,
  loading: false,
  title: '',
  form: {
    id: undefined,
    name: '',
    logo: '',
    title: '',
    weixinSign: '',
    principalName: '',
    appletName: '',
    appletImg: '',
    appletAppid: '',
    appletSecret: '',
    mchId: '',
    mchKey: '',
    keyPath: '',
    generalAppid: '',
    generalSecret: '',
    generalToken: '',
    associationCountList: []
  }
})

function getInfo() {
  state.loading = true
  api.getCurrentDetail().then(resp => {
    if (resp.ok) {
      state.form = resp.data as any
    }
  }).finally(() => {
    state.loading = false
  })
}

function onEdit() {
  if (state.form.id) {
    api.onEdit(state.form.id)
  }
}

onMounted(() => {
  getInfo()
})
</script>

<style scoped lang="scss">
.user-company-page {
  position: relative;
}

.ant-list-item {
  border-block-end: none !important;
  padding-left: 0;
}
</style>
